<template>
    <div>
        <a-row>
            <a-col>
                <div style="text-align:center;margin-left:50px;">
                    <!-- <img src="~@/assets/deviceOffSmall.jpg" style="width:800px;"/> -->
                    设备{{ isOnlineStr }} ({{ onTime }})
                </div>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="8">
                <div>
                    <div>
                        <div class="gaugeTitlePosition">
                            <div style="text-align: center;top:">主电</div>
                            <div class="gaugeIconsPosition">
                                <i v-if="!isMainVolErr" class="action-jeecg actiondeviceon statusLight on" />
                                <i v-if="isMainVolErr" class="action-jeecg actionalarm err" />
                                <span v-if="isCityVolErr" class="err">市电</span>
                            </div>

                        </div>
                        <div id="main_vol" style="width:100%;height:300px;" />
                    </div>
                </div>
            </a-col>
            <a-col :span="8">
                <div>

                    <div>
                        <div class="gaugeTitlePosition">
                            <div style="text-align: center;">备电</div>
                            <div class="gaugeIconsPosition">
                                <i v-if="!isBackVolErr" class="action-jeecg actiondeviceon statusLight on" />
                                <i v-if="isBackVolErr" class="action-jeecg actionalarm err" />
                                <span v-if="isUPSErr" class="err">UPS</span>
                            </div>


                        </div>
                        <div id="backup_vol" style="width:100%;height:300px;" />
                    </div>
                </div>
            </a-col>
            <a-col :span="8">
                <div>
                    <div>
                        <div class="gaugeTitlePosition">
                            <div style="text-align: center;">温度</div>
                            <div class="gaugeIconsPosition">
                                <i v-if="isTempErr" class="action-jeecg actionalarm err" />
                            </div>
                        </div>
                        <div ref="temp_status" style="width:100%;height:300px;" />
                    </div>
                </div>
            </a-col>
        </a-row>
        <a-row>
            <!--Total current-->
            <a-col span="3">
                <div>
                    <i v-if="isSupplyCurrentErr" class="action-jeecg actionalarm err" />
                    总电流:<br/>
                    <span class="sumCurrent">{{sumCurrent}}A</span>
                </div>
            </a-col>
            <!--Switches-->
            <a-col span="21">
                <div v-if="hasSwitches" style="text-align:center;">
                    <template v-for="(item, index) of deviceData.switches.switches">
                        <div v-bind:key="'switch' + index" style="width:25px;display:inline-block;float:left;">
                            <div>
                                <div  v-if="item.current > 0 && item.state == 0" class="switchCurrent">
                                    {{ item.current }}A
                                </div>
                                <div  v-else-if="item.current <= 0" class="switchNoCurrent">
                                    &nbsp;
                                </div>
                            </div>
                            <div>
                                <div class="electricBox">
                                    <img v-if="item.iswarning == 1" src="~@/assets/portConnectErr.png"
                                        class="switchBg" />
                                    <img v-else-if="item.state == 0" src="~@/assets/portConnect.png" class="switchBg" />
                                    <img v-else-if="item.state == 1" src="~@/assets/portConnectOff.png"
                                        class="switchBg" />
                                </div>
                                <!-- <div class="electricBox"  style="margin-left:-25px;">
                                    <div v-if="item.current > 0" class="eletricOn">
                                        &nbsp;
                                    </div>
                                </div> -->
                            </div>
                            <div>
                                <!--  0 开 1关-->
                                <div v-if="item.state == 0" class="switchName switchNamePlaceFix">
                                    {{ item.name }}<i class="action-jeecg actionedit off" style="font-size:12px;" />
                                </div>
                                <div v-if="item.state == 1" class="switchName">
                                    {{ item.name }}<i class="action-jeecg actionedit off" style="font-size:12px;" />
                                </div>
                            </div>
                        </div>
                        
                    </template>


                </div>

            </a-col>
        </a-row>
    </div>
</template>

<script>

let echarts = require('echarts');
import { TigerChartOptions } from '@/components/tiger/TigerChartOptions'
import { WebSocketDeviceMixins } from '@/mixins/tiger/WebSocketDeviceMixins'
import { formatDate } from '@/utils/util'


export default {
    name: "DeviceDetailBoxState",
    mixins: [WebSocketDeviceMixins],
    props: {
        deviceObj: {
            required: true,
            type: Object,
            default: {
                baseinfo: {
                    name: '请选择一个设备',
                },
                id: 0,
            },
        },
    },
    components: {},
    data() {
        return {
            main_vol_opt: {},
            back_vol_opt: {},
            temp_opt: {},
            deviceData: {},
            main_vol_divChart: null,
            back_vol_divChart: null,
            temp_statusChart: null,
            eletricOn: 'eletricOn',
            switchBg: 'switchBg',
            switchName: 'switchName',

        };
    },
    mounted() {
        this.init();
    },
    created() {
        //深度复制
        this.initEchartElements();
        this.deviceData = this.deviceObj;
    },
    methods: {
        initEchartElements() {
            this.main_vol_opt = JSON.parse(JSON.stringify(TigerChartOptions.vol_opt));
            this.back_vol_opt = JSON.parse(JSON.stringify(TigerChartOptions.vol_opt));
            this.temp_opt = JSON.parse(JSON.stringify(TigerChartOptions.temp_opt));
            this.main_vol_opt.series[0].detail.formatter = function (value) {
                return '{value|' + value.toFixed(2) + 'V}';
            };
            this.back_vol_opt.series[0].detail.formatter = function (value) {
                return '{value|' + value.toFixed(2) + 'V}';
            };
            this.temp_opt.series[0].detail.formatter = function (value) {
                return value.toFixed(2) + '°C';
            };
        },
        initDeviceSocket(val) {
            if (val.id != 0 && val.id != 'undefined') {
                this.deviceData = val;
                this.initWebSocket(this.deviceData.id);
            }
        },
        init() {
            // 新建一个promise对象
            let newPromise = new Promise((resolve) => {
                resolve()
            });
            //然后异步执行echarts的初始化函数
            let that = this;
            newPromise.then(() => {
                let main_vol_div = document.getElementById('main_vol');
                let back_vol_div = document.getElementById('backup_vol');
                let temp_status = this.$refs.temp_status;

                that.main_vol_divChart = echarts.init(main_vol_div);
                that.back_vol_divChart = echarts.init(back_vol_div);
                that.temp_statusChart = echarts.init(temp_status);


                this.loadDeviceData();
            });

        },
        resolveData(deviceData) {

            let that = this;
            that.deviceData = deviceData;
            // 新建一个promise对象
            let newPromise = new Promise((resolve) => {
                resolve()
            });
            newPromise.then(() => {
                this.loadDeviceData();
            });
        },
        isDataNotReady() {
            return this.deviceData == 'undefined' || JSON.stringify(this.deviceData) == '{}' || this.deviceData.id == 0;
        },
        getWanring(key) {
            if (this.isDataNotReady())
                return true;
            else {
                if (this.deviceData.warning[key] == 0)
                    return false;
                else
                    return true;
            }
        },
        loadDeviceData() {
            if (!this.isDataNotReady()) {
                // console.log(this.deviceData);
                this.temp_opt.series[0].data[0].value = this.deviceData.baseinfo.temp;
                // that.temp_opt.series[1].data[0].value = deviceData.baseinfo.temp;
                this.main_vol_opt.series[0].data[0].value = this.deviceData.baseinfo.mainVol;
                this.back_vol_opt.series[0].data[0].value = this.deviceData.baseinfo.backVol;

                this.temp_statusChart.setOption(this.temp_opt);
                this.back_vol_divChart.setOption(this.back_vol_opt);
                this.main_vol_divChart.setOption(this.main_vol_opt);
            }
        }
    },
    watch: {
        deviceObj(val) {
            this.deviceData = val;
            this.loadDeviceData();
            this.initDeviceSocket(val);
        }
    },
    computed: {
        isOnlineStr: function () {
            if (!this.isDataNotReady() && this.deviceData.baseinfo.isOnline)
                return this.deviceData.baseinfo.isOnline == '1' ? '在线' : '离线';
            return "离线";
        },
        onTime: function () {
            if (!this.isDataNotReady() && this.deviceData.onTime)
                return formatDate(this.deviceData.onTime, 'yyyy-MM-dd hh:mm:ss')
            return "";
        },
        offTime: function () {
            if (!this.isDataNotReady() && this.deviceData.offTime)
                return formatDate(this.deviceData.offTime, 'yyyy-MM-dd hh:mm:ss')
            return "";
        },
        input: function () {
            if (this.isDataNotReady())
                return "离线";
            else if (this.deviceData.baseinfo.input == '0')
                return '主';
            else if (this.deviceData.baseinfo.input == '1')
                return '备';
            else if (this.deviceData.baseinfo.input == '2')
                return '双';
        },
        output: function () {
            if (this.isDataNotReady())
                return "离线";
            else if (this.deviceData.baseinfo.output == '0')
                return '主';
            else if (this.deviceData.baseinfo.output == '1')
                return '备';
        },
        sumCurrent:function(){
            if (this.isDataNotReady())
                return "";
           return this.deviceData.baseinfo.supplyCurrent;
        },
        isMainVolErr: function () {
            return this.getWanring('mainVol');
        },
        isBackVolErr: function () {
            return this.getWanring('backVol');
        },
        isCityVolErr: function () {
            return this.getWanring('cityVol');
        },
        isUPSErr: function () {
            return this.getWanring('ups');
        },
        isTempErr: function () {
            return this.getWanring('temp');
        },
        isSupplyCurrentErr:function(){
            return this.getWanring('current');
        },
        hasSwitches: function () {
            if (!this.isDataNotReady()) {
                if (this.deviceData.switches.total > 0) return true;
            }
            return false;
        }
    }

}
</script>

<style>
.realDeviceOffLine {
    background-image: url("~@/assets/deviceOffSmall.jpg");
}

.chargeLink {
    margin-left: 3px;
    width: 15px;
    margin-right: 3px;
    height: 200px;
    float: left;
    display: inline-block;
}

.splitLine {
    left: 10px;
    width: 3px;
    margin-right: 10px;
    height: 120px;
    float: left;
    top: 20px;
    display: inline-block;
}


.gaugeTitlePosition {
    position: absolute;
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.gaugeIconsPosition {
    position: absolute;
    top: 85px;
    width: 100%;
    display: block;
    text-align: center;
}

.gaugeIconsPosition i {
    font-size: 33px;
}

.switchName {
    /* position: absolute;
    display: inline-block;
    width: 12px;
    margin-left: -0px;
    margin-top: 130px; */
}

.switchNamePlaceFix {
    /* margin-left: -3px; */
}

.electricBox {
    float:left;
    width:25px;
    display:inline-block;
    text-align:center;
}

.switchBg {
    width: 25px;
    height: 130px;
}

.eletricOn {
    height: 90px;
    border-radius: 2px;
    width: 3px;
    margin-top:20px;
    display:inline-block;
    animation-name: anim1;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}
.switchCurrent {
    font-size: 12px;
    width: 15px;
    height: 60px;
    border: 1px solid #50bb48;
    margin-left: 7px;
    top: 32px;
    position: absolute;
}

.switchNoCurrent{
    width: 23px;
    height:38px;
}

.sumCurrent{
    display: inline-block;
    border: 1px solid #41ad33;
    background-color: #91e387;
    padding: 3px 5px;
}

@keyframes anim1 {
    0% {
        background-color: #1f99f6;
    }

    100% {
        background-color: #45e761;
    }
}
</style>